<template>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="category" label="商品类别" width="180" align="center" />
    <el-table-column prop="proname" label="商品名" width="180" align="center" />
    <el-table-column prop="imgs" label="商品图片" width="180" align="center">
      <template #default="scope">
        <img :src="scope.row.imgs[0]" alt="" class="img" />
      </template>
    </el-table-column>
    <el-table-column prop="issale" label="销售状态" width="180" align="center">
      <template #default="scope">
        <el-switch
          v-model="scope.row.issale"
          @change="isSaleFn(scope.row)"
          :active-value="1"
          :inactive-value="0"
        />
      </template>
    </el-table-column>
    <el-table-column prop="originprice" label="商品价格" width="180" align="center">
      <template #default="scope"> {{ scope.row.originprice }}元 </template>
    </el-table-column>
    <el-table-column prop="stock" label="商品库存" width="180" align="center" />
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row)"> 删除 </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 编辑弹窗信息 -->
  <el-drawer v-model="dialog" direction="rtl" size="50%">
    <template #header>
      <h4>编辑商品信息</h4>
    </template>
    <el-form label-width="auto" style="width: auto">
      <el-form-item label="商品类别">
        <el-input v-model="fromDate.category"></el-input>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input v-model="fromDate.proname"></el-input>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input v-model="fromDate.originprice"></el-input>
      </el-form-item>
      <el-form-item label="商品库存">
        <el-input v-model="fromDate.stock"></el-input>
      </el-form-item>
      <el-form-item label="上架商品">
        <el-switch v-model="fromDate.issale" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="上传图片">
        <el-upload
          v-model:file-list="fileList"
          action="http://localhost:3001/admin/file/upload"
          name="img"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
    </el-form>

    <template #footer>
      <div style="flex: auto" class="box">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">确定</el-button>
      </div>
    </template>
  </el-drawer>
  <!-- 分页 -->
  <el-row>
    <el-col :span="24">
      <div class="footer">
        <!-- 分页组件 -->
        <el-pagination
          v-model:currentPage="currentPage"
          :page-size="pageSize"
          :page-sizes="[5, 10, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="margin-top: 20px"
        ></el-pagination>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { productListRequest, productDelRequest, productUpdateRequest } from '@/api/product'
// import { count } from 'echarts/types/src/component/dataZoom/history.js'
let tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
//获取商品列表数据
async function proLoadList() {
  let r = await productListRequest(currentPage.value, pageSize.value)
  console.log(r.data)
  tableData.value = r.data.data
  total.value = r.data.total
}
proLoadList()
//删除商品
let handleDelete = (row) => {
  ElMessageBox.confirm('确认删除该商品?', 'Delete', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'error',
  })
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      productDelRequest(row.proid)
      proLoadList()
      pagination()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
//编辑销售状态
function isSaleFn(row) {
  productUpdateRequest(row.proid, { issale: row.issale }).then((r) => {})
  proLoadList()
}
//编辑商品信息
let dialog = ref(false)
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
let fromDate = ref({})
const fileList = ref([])
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}
//点击编辑按钮
function handleEdit(row) {
  dialog.value = true
  fromDate.value = JSON.parse(JSON.stringify(row))
  fileList.value = fromDate.value.imgs.map((v) => {
    return {
      name: v,
      url: v,
    }
  })
}
//取消掉弹窗
function cancelClick() {
  dialog.value = false
}
///保存编辑商品信息
function confirmClick() {
  let imgs = fileList.value.map((v) => {
    if (v.response) {
      return v.response.fileUrl
    } else {
      return v.url
    }
  })
  fromDate.value.imgs = imgs
  productUpdateRequest(fromDate.value.proid, fromDate.value).then((r) => {
    dialog.value = false
    proLoadList()
  })
}
//分页

const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  currentPage.value = 1 // 重置为第一页
  proLoadList(currentPage.value)
}

// 处理当前页变化
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
  proLoadList((currentPage.value, pageSize.value))
}
</script>

<style scoped>
.img {
  width: 100px;
}
.el-pagination {
  display: flex;
  justify-content: center;
}
.box {
  float: left;
}
</style>
